import styled from "styled-components";

// 基础案例
const Button = styled.button<{ primary?: boolean }>`
  background-color: ${(props) => (props.primary ? "blue" : "red")};
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  margin: 10px;
  &:hover {
    color: pink;
  }
`;

export const ButtonDemo = () => {
  return (
    <div>
      <Button>按钮</Button>
      <Button primary>主要按钮</Button>
    </div>
  );
};
